
<template>
  <div class="scroll-box" id="wzdScrollBox">
    <div class="menu">
      <div
        v-for="menu in menus"
        :key="menu.value"
        @click="menuClick(menu.value)"
        :class="{ active: menu.value === currnentValue }"
      >
        {{ menu.label }}
      </div>
    </div>
    <div class="content" id="wzd-scroll-content">
      <div id="wzdScrollBox-menu1">
        <h1>wzdScrollBox-menu1</h1>
        /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 * 实现思路
        * * 怎么通过菜单来定位内容区？ * 左侧菜单和右侧内容标题来源于同一个数组
        *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */
      </div>
      <div id="wzdScrollBox-menu2">
        <h1>wzdScrollBox-menu2</h1>
        /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 * 实现思路
        * * 怎么通过菜单来定位内容区？ * 左侧菜单和右侧内容标题来源于同一个数组
        *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */
      </div>
      <div id="wzdScrollBox-menu3">
        <h1>wzdScrollBox-menu3</h1>
        /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 * 实现思路
        * * 怎么通过菜单来定位内容区？ * 左侧菜单和右侧内容标题来源于同一个数组
        *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */
      </div>
      <div id="wzdScrollBox-menu4">
        <h1>wzdScrollBox-menu4</h1>
        /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 * 实现思路
        * * 怎么通过菜单来定位内容区？ * 左侧菜单和右侧内容标题来源于同一个数组
        *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */
      </div>
      <div id="wzdScrollBox-menu5">
        <h1>wzdScrollBox-menu5</h1>
        /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 * 实现思路
        * * 怎么通过菜单来定位内容区？ * 左侧菜单和右侧内容标题来源于同一个数组
        *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */ /** * 要求 * 左侧菜单栏，右侧内容区 * 菜单栏和内容区双向定位 *
        实现思路 * * 怎么通过菜单来定位内容区？ *
        左侧菜单和右侧内容标题来源于同一个数组 *
        菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position
        ：relative） * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
        * 如果此时开通了滚轮的监听，要移除监听再滚动 * *
        怎么通过滚动来定位菜单？ *
        初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。 *
        添加滚动监听事件 *
        每次触发监听，拿到当强滚动的距离（e.target.scrollTop） *
        遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
        * * */
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 要求
 * 左侧菜单栏，右侧内容区
 * 菜单栏和内容区双向定位
 * 实现思路
 *
 * 怎么通过菜单来定位内容区？
 * 左侧菜单和右侧内容标题来源于同一个数组
 * 菜单点击时，找到相对应的右侧内容区相对于父级元素的offsetTop（要求父级元素开启定位position ：relative）
 * ele.scroll({top: offsetTop,behavior: 'smooth'})滚动到顶部
 * 如果此时开通了滚轮的监听，要移除监听再滚动
 *
 * 怎么通过滚动来定位菜单？
 * 初次渲染页面后，获取每个内容区距离顶部的offsetTop，并存储到数组中。
 * 添加滚动监听事件
 * 每次触发监听，拿到当强滚动的距离（e.target.scrollTop）
 * 遍历数组，如果当前滚动的距离大于等于某个元素的offsetTop则定位到相应的菜单
 *
 *
 */
export default {
  name: "ScrollBox",
  data() {
    return {
      menus: [
        {
          label: "menu1",
          value: "menu1",
        },
        {
          label: "menu2",
          value: "menu2",
        },
        {
          label: "menu3",
          value: "menu3",
        },
        {
          label: "menu4",
          value: "menu4",
        },
        {
          label: "menu5",
          value: "menu5",
        },
      ],
      currnentValue: "menu1",
      contentLocation: [],
    };
  },
  methods: {
    menuClick(value) {
      console.log(value);
      this.currnentValue = value;
      this.removeScrollFun();
      const ELE = document.getElementById(`wzdScrollBox-${value}`);
      document.getElementById("wzd-scroll-content").scroll({
        top: ELE.offsetTop,
        behavior: "auto",
      });
      // 解决在有滚轮监听的情况下，点击最有一个菜单，会被滚轮事件覆盖，切换到倒数第二个菜单的问题
      setTimeout(() => {
        this.addScrollFun();
      }, 500);
    },
    addScrollFun() {
      console.log("addScrollFun");
      document
        .getElementById("wzd-scroll-content")
        .addEventListener("scroll", this.listenScroll);
    },
    removeScrollFun() {
      console.log("removeScrollFun");
      document
        .getElementById("wzd-scroll-content")
        .removeEventListener("scroll", this.listenScroll);
    },
    // 内容部分滚动事件
    listenScroll(e) {
      console.log("listenScroll");
      this.contentLocation.forEach((el) => {
        // 当前滚动高度大于等于link高度 （这个34是我菜单栏每个的高度  可以根据自己的实际情况设置）
        if (e.target.scrollTop >= el.offsetTop - 30) {
          this.currnentValue = el.menuId;
        }
      });
    },
    // 在获取页面内容之后调用这个方法 内容部分标题相对于顶部的位置--用来左右滚动联动
    handleLocation() {
      this.contentLocation = [];
      if (Array.isArray(this.menus)) {
        this.menus.forEach((menu) => {
          this.contentLocation.push({
            menuId: menu.value,
            offsetTop: document.getElementById(`wzdScrollBox-${menu.value}`)
              .offsetTop,
          });
        });
      }
    },
  },
  mounted() {
    this.addScrollFun();
    this.handleLocation();
  },
};
</script>

<style lang="less" scoped>
@primaryColor: #1975d1;
.scroll-box {
  width: 100%;
  height: calc(100vh - 170px);
  display: flex;
  .menu {
    box-sizing: border-box;
    width: 200px;
    position: relative;
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    left: 0;
    top: 0;
    color: #909399;
    border-radius: 5px;
    background-color: #fff;
    .active {
      color: @primaryColor;
      position: relative;
      &::before {
        content: "";
        display: block;
        width: 5px;
        height: 16px;
        background-color: @primaryColor;
        position: absolute;
        left: -5px;
        top: 5px;
      }
    }
    > div {
      padding: 2px 5px;
      cursor: pointer;
      &:hover {
        position: relative;
        color: @primaryColor;
        // &::before {
        //   content: "";
        //   display: block;
        //   width: 5px;
        //   height: 16px;
        //   background-color: @primaryColor;
        //   position: absolute;
        //   left: -5px;
        //   top: 5px;
        // }
      }
    }
  }
  .content {
    position: relative;
    margin-left: 10px;
    flex: 1;
    overflow-y: auto;
  }
}
</style>